<template>
    <draggable
        class="drag-sub-list-ul"
        :list="list"
        tag="ul"
        handle=".handle"
        ghost-class="ghost"
        filter=".no-drag"
        :sort="false"
        :clone="onClone"
        :group="{ name: 'tagModel', pull: 'clone', put: false }">
        <template v-for="item in renderList">
            <li class="drag-sub-list-li handle" :key="item.id">
                 <el-tooltip effect="dark" :content="item.name" placement="top">
                    <el-button plain @click="handleItemClick(item, 'add')">{{ item.name }}</el-button>
                 </el-tooltip>
            </li>
        </template>
        <template v-if="list.length >= 8">
            <li class="drag-sub-list-li no-drag">
                <el-button plain type="info" @click="toggoleMore">
                    <template v-if="!showMore">
                        展开更多<i class="el-icon-d-arrow-right"></i>
                    </template>
                    <template v-else>
                        收起更多<i class="el-icon-d-arrow-left"></i>
                    </template>
                </el-button>
            </li>
        </template>
    </draggable>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import draggable from "vuedraggable";

@Component({
    components: {
        draggable
    }
})
export default class DragList extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any | any[];

    handleItemClick(item: any, type: string) {
        this.$emit("item-click", this.onClone(item), type);
    }

    showMore = false;

    get renderList() {
        if (this.showMore) {
            return this.list;
        } else {
            return this.list.slice(0, 7);
        }
    }

    onClone(e: any) {
        e._key = +new Date();
        return e;
    }

    toggoleMore() {
        this.showMore = !this.showMore;
    }
}
</script>
